<!DOCTYPE html>
<!-- saved from url=(0041)https://www.zhangxinxu.com/sp/filter.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="description" content="使用滤镜表示任意两个颜色转换应该使用的CSS3 CSS filter的属性值是多少，方便实现任意图标的颜色改变，本工具实时在线，支持任意色值">
<meta name="keywords" content="css3, css, filter, HSL, 工具, 色值, 颜色, hue-rotate, brightness, saturate, 在线">
<meta name="author" content="张鑫旭, zhangxinxu">
<title>CSS3 filter滤镜改图片颜色在线工具</title>
<style>
body, input { font-family: 'Pingfang SC', 'Microsoft Yahei'; }
h1 {
	font-size: 32px;
	font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,'Source Han Serif SC', STZhongsong, "Source Han Sans CN", 'PingFang SC', 'Myriad Pro', 'Hiragino Sans GB', SimHei;
	writing-mode: vertical-lr;
	position: absolute;
	margin-top: 16px;
	left: calc(50% - 350px);
}
.filter-form {
	max-width: 300px;
	margin: 0 auto;
	font-size: 150%;
}
.filter-input {
	width: 100%;
	padding: 15px 20px;
	font-size: 100%;
	box-sizing: border-box;
	text-shadow: 1px 1px rgba(0,0,0,.2);
}
.filter-submit {
	display: block;
	width: 100%;
	height: 60px;
	font-size: 100%;
}
.filter-show {
	text-align: center;
	margin: 1em 16px;
	font-size: 150%;
}
.filter-block {
	display: flex;
	max-width: 300px;
	margin: 3em auto 1em;
	justify-content: space-between;
}
.filter-span {
	width: 140px; height: 140px;
	color: gray;
	outline: 1px dotted;
	outline-offset: 2px;
}
.filter-span span {
	position: absolute;
	margin-top: -30px;
	font-size: 14px;	
}
.filter-loss {
	text-align: center;
	padding: 10px 16px;
	background-color: #333;
	color: #fff;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.filter-input-tips {
	position: absolute;
	margin-left: 295px;
	margin-top: 3px;
	font-size: 12px;
	color: gray;
	transform: translateX(-100%);	
}
@media screen and (max-width: 600px) {
	h1 { writing-mode: horizontal-tb; position: static; text-align: center; }
}
</style>
</head>

<body>
<h1>CSS filter滤镜任意色值转换工具</h1>
<p align="center">支持任意格式色值，包括颜色关键字。</p>
<form id="form" class="filter-form">	
  	<p><span class="filter-input-tips">原始色</span><input id="start" class="filter-input" placeholder="原始色值" value="#000000" name="start" autocomplete="off" required="" autofocus=""></p>
    <p><span class="filter-input-tips">目标色</span><input id="end" class="filter-input" placeholder="呈现色值" name="end" value="#ff0033" autocomplete="off" required=""></p>
    <input type="submit" class="filter-submit" value="转换">
</form>
<div class="filter-block">
	<div id="colorReal" class="filter-span" style="background-color:#ff0033;"><span>真背景色</span></div>
    <div id="colorFilter" class="filter-span"><span>滤镜呈现</span></div>
</div>
<p id="show" class="filter-show"></p>
<p id="lossDetail" class="filter-loss">如果存在误差，或误差加大，可以重复转换。</p>

<script src="/resource/filterColor.js"></script>

</body>
</html>